<template>
  <div
    @click="handleClick"
    :class="{
      'station-card-wrapper': true,
      'station-card-blank-wrapper': type === 'none',
    }"
    :title="item.stationName"
  >
    <span v-if="type === 'none'">{{ defaultText || '--' }}</span>
    <div v-else class="station-container-wrapper">
      <!-- <el-checkbox disabled :checked="item.checked" class="station-card-wrapper-check"/> -->
      <input
        type="checkbox"
        @click.prevent="handleChange"
        :checked="checked"
        class="station-card-wrapper-check"
      />
      <div>{{ item.stationName || '--' }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StationCard.vue',
  props: {
    type: {
      type: String,
      default: 'none',
    },
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    defaultText: {
      type: String,
      default: '--',
    },
    checked: {
      type: Boolean,
      defualt: false,
    },
  },
  methods: {
    handleChange() {},
    handleClick() {
      this.$emit('clickItem', this.item)
    },
  },
}
</script>
<style lang="scss" scoped>
.station-card-wrapper {
  position: relative;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.station-card-blank-wrapper {
  border: 1px dashed;
  padding: 0;
  cursor: not-allowed;
}

.box-sel-no {
  cursor: not-allowed;
  background: rgba(247, 247, 248, 1);
  border: 1px solid rgba(211, 211, 211, 1);
  .checkbox-sty {
    cursor: not-allowed;
  }
}
</style>
<style lang="scss">
.station-container-wrapper {
  .el-checkbox__input {
    &.is-disabled {
      cursor: pointer !important;
    }
  }

  .station-card-wrapper-check {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
}
</style>
